<template>
  <el-container class="content">

    <el-aside style="width: 240px;">
      <el-menu style="min-height: 600px" :default-active="activeIndex" @select="handleSelect">
        <el-menu-item index="1">
          <i class="el-icon-menu"></i>
          <span slot="title">基本信息</span>
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-document"></i>
          <span slot="title">基本设置</span>
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-document"></i>
          <span slot="title">人脸识别配置</span>
        </el-menu-item>
        <el-menu-item index="6">
          <i class="el-icon-document"></i>
          <span slot="title">文字识别配置</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-document"></i>
          <span slot="title">二维码配置</span>
        </el-menu-item>
        <el-menu-item index="7">
          <i class="el-icon-document"></i>
          <span slot="title">存储配置</span>
        </el-menu-item>
        <el-menu-item index="5">
          <i class="el-icon-document"></i>
          <span slot="title">云音箱配置</span>
        </el-menu-item>
        <el-menu-item index="8">
          <i class="el-icon-s-operation"></i>
          <span slot="title">系统模型配置</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>
      <component :is="page"></component>
    </el-main>
  </el-container>
  <!-- Default box -->
</template>

<script setup>
import index from "./index.vue"
import setting from "./setting.vue"
import face from "./face.vue"
import code from "./code.vue"
import voice from "./voice.vue"
import ocr from "./ocr.vue"
import oss from "./oss.vue"
import model from "./model.vue"

import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";

const route = useRoute()

const activeIndex=ref("1")
const page=ref(index)

const handleSelect=(event)=>{
  if (event === "1") {
    page.value = index;
  } else if (event === "2") {
    page.value = setting;
  } else if (event === "3") {
    page.value= face;
  } else if (event === "4") {
    page.value = code;
  }else if (event === "5") {
    page.value = voice;
  } else if (event === "6") {
    console.info(event);
    page.value = ocr;
  } else if (event === "7") {
    page.value = oss;
  } else if (event === "8") {
    page.value = model;
  } else {
    console.info("hi");
  }
}
onMounted(async () => {
  activeIndex.value= route.query.activeIndex;
})
</script>

<style scoped>
.content {
  background-color: #fff;
  height: 100%;
  width: 100%;
  display: flex;
}
</style>
